<template>
<div class="game-card" :style="styleVar" @click="gotoplay">
  <div class="game-card-desc">
    <h1>{{gameinfo.gamename}}</h1>
    <p>{{gameinfo.gamedesc}}</p>
  </div>
</div>
</template>

<script>
export default {
  name: "gamecard",
  props: {
    gameinfo: {
      type: Object
    }
  },
  computed: {
    styleVar() {
      return {
        '--url': `url(${this.gameinfo.url}) no-repeat top center`,
      }
    }
  },created() {
  },
  methods:{
    gotoplay(){
      console.log(this.gameinfo.gametype)
      if (this.gameinfo.gametype === "H5")
        this.$router.push({name:'play',query:{gameid: this.gameinfo.id}})
      else if (this.gameinfo.gametype === "exe")
        this.$router.push({name:'exegame',query:{gameid: this.gameinfo.id}})
    }
  }
}
</script>

<!--<script setup>-->
<!--import { defineProps,computed } from 'vue';-->
<!--const props = defineProps({-->
<!--  gameinfo: {-->
<!--    type: Object-->
<!--  }-->
<!--})-->
<!--</script>-->

<style scoped>
.game-card {
  position: relative;
  /*background: url("../src/assets/img/底特律：化身为人.png") no-repeat top center;*/
  background: var(--url);
  background-size: 360px;
  width: 360px;
  height: 280px;
  box-shadow:0 0 25px rgb(0 0 0 / 30%);
  margin-bottom: 20px;
  cursor: pointer;
  margin-left: 15px;
}
.game-card-desc {
  width: 100%;
  height: 80px;
  position: absolute;
  bottom: 0;
  color: #c5cbd8;
  background: linear-gradient(135deg,#1b5173,#237fa8);
  padding: 10px;
}
.game-card-desc>h1{
  font-size: 23px;
  font-weight: 800;
}
.game-card-desc>p{
  position: absolute;
  line-height: 21px;
  bottom: 10px;
}
</style>
